﻿@page "/tree"

<div class="d-flex">
    <div class="p-3" style="min-width: 180px;">
        <BootstrapInput TValue="string" placeholder="搜索" />
        <div class="mt-3" style="border: 1px solid #0094ff; border-radius: 3px; padding: 1rem; position: relative; overflow: auto;">
            <Tree Items="@CheckedItems" />
        </div>
    </div>
    <div class="p-3 flex-fill">
        <div class="mb-3">
            <Button Text="添加根节点" />
            <Button Text="添加子节点" />
            <Button Text="编辑" />
            <Button Text="删除" Color="Color.Danger" />
        </div>
        <div class="mb-3">
            <div class="row mb-3">
                <div class="col-12">
                    <div class="form-control" style="border: 1px solid #0094ff; border-radius: 3px;">数据信息</div>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-2 col-form-label">父节点:</label>
                <div class="col-10">
                    <BootstrapInput TValue="string" />
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-2 col-form-label">节点名称:</label>
                <div class="col-10">
                    <BootstrapInput TValue="string" />
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-2 col-form-label">节点排序:</label>
                <div class="col-10">
                    <BootstrapInput TValue="string" />
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-2 col-form-label">扩展1:</label>
                <div class="col-10">
                    <BootstrapInput TValue="string" />
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-2 col-form-label">节点备注:</label>
                <div class="col-10">
                    <BootstrapInput TValue="string" />
                </div>
            </div>
            <div class="row">
                <div class="col-10 offset-2">
                    <Button Text="提交" />
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private IEnumerable<TreeItem> CheckedItems { get; set; } = GetCheckedItems();


    private static IEnumerable<TreeItem> GetCheckedItems()
    {
        var ret = new List<TreeItem>
        {
            new TreeItem() { Text = "导航一" },
            new TreeItem() { Text = "导航二", Checked = true, IsExpanded = true },
            new TreeItem() { Text = "导航三" }
        };

        ret[1].AddItem(new TreeItem() { Text = "子菜单一" });
        ret[1].AddItem(new TreeItem() { Text = "子菜单二", IsExpanded = true });
        ret[1].AddItem(new TreeItem() { Text = "子菜单三" });

        ret[1].Items.ElementAt(0).AddItem(new TreeItem() { Text = "孙菜单1一" });
        ret[1].Items.ElementAt(0).AddItem(new TreeItem() { Text = "孙菜单1二" });

        ret[1].Items.ElementAt(1).AddItem(new TreeItem() { Text = "孙菜单2一" });
        ret[1].Items.ElementAt(1).AddItem(new TreeItem() { Text = "孙菜单2二" });

        ret[1].Items.ElementAt(1).Items.ElementAt(1).AddItem(new TreeItem() { Text = "曾孙菜单一" });
        ret[1].Items.ElementAt(1).Items.ElementAt(1).AddItem(new TreeItem() { Text = "曾孙菜单二" });

        ret[1].Items.ElementAt(1).Items.ElementAt(1).Items.ElementAt(1).AddItem(new TreeItem() { Text = "曾曾孙菜单一" });
        ret[1].Items.ElementAt(1).Items.ElementAt(1).Items.ElementAt(1).AddItem(new TreeItem() { Text = "曾曾孙菜单二" });

        return ret;
    }
}